<template>
  <div class="news-box">
    <Head :title="title" />
    <van-icon
      name="arrow-left"
      class="go-back"
      size="0.6rem"
      @click="gotoBack"
    />

    <!-- 导航 -->
    <van-tabs v-model="active">
      <van-tab title="交易物流">交易物流</van-tab>
      <van-tab title="通知">
        <div class="inform-box">
          <div class="inform">
            <div class="inform-top">
              <van-icon name="volume-o" size="0.4rem" />
              <div class="inform-top-right">
                <p>宜居租房</p>
                <p>14:32</p>
              </div>
            </div>
            <div class="inform-bottom">
              <p>
                恭喜您，您啊实打实大苏打实打实大苏打实打实大苏打啊速度还是丢哦会啊和覅u双方都会哦啊和啊撒旦解放蝙蝠暴按时打卡记录办法
              </p>
            </div>
          </div>
        </div>

        <div class="inform-box">
          <div class="inform">
            <div class="inform-top">
              <van-icon name="volume-o" size="0.4rem" />
              <div class="inform-top-right">
                <p>宜居租房</p>
                <p>14:32</p>
              </div>
            </div>
            <div class="inform-bottom">
              <p>
                恭喜您，您啊实打实大苏打实打实大苏打实打实大苏打啊速度还是丢哦会啊和覅u双方都会哦啊和啊撒旦解放蝙蝠暴按时打卡记录办法
              </p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="互动">互动</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Head from "../../../components/head/Head";

export default {
  name: "MyNews",
  data() {
    return {
      title: "我的消息",
      active: 1,
    };
  },
  components: {
    Head,
  },
  methods: {
    gotoBack() {
      console.log(1);
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.news-box {
  position: relative;
}
.go-back {
  position: absolute;
  top: 0.45rem;
  left: 0.5rem;
}
.inform-box {
  margin-top: 0.35rem;
}
.inform {
  width: 75%;
  margin: 0 auto;
  border: 1px solid;
  border-radius: 0.1rem;
  padding: 0.3rem 0.2rem;
  box-shadow: 2px 2px 5px #ccc;
}
.inform-top {
  display: flex;
  /* justify-content: center; */
  align-items: stretch;
}
.inform-top-right {
  margin-left: 0.1rem;
}
.inform-top p,
.inform-bottom p {
  font-size: 13px;
}
.inform-bottom p {
  text-align: left;
  padding-left: 0.5rem;
  margin-top: 0.3rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>